<template>
    <el-card style="max-width: 480px" shadow="hover" @click="goDetail">
        <div class="content">
            <div class="left">
                <div class="name">{{ hospitalInfo.hosname }}</div>
                <div class="msg">
                    <div class="level">
                        <el-icon>
                            <Checked />
                        </el-icon>
                        <span>{{hospitalInfo.param.hostypeString}}</span>
                    </div>
                    <div class="time">
                        <el-icon>
                            <Timer />
                        </el-icon>
                        <span>每天{{hospitalInfo.bookingRule.releaseTime}}放号</span>
                    </div>
                </div>
            </div>
            <div class="right">
                <img :src="`data:image/jpeg;base64,${hospitalInfo.logoData}`" alt="">
            </div>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { Checked, Timer } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';

//接收度组件传过来的props
defineProps(['hospitalInfo'])

let $router = useRouter()
//点击医院卡片跳转详情页
const goDetail=()=>{
    $router.push({path:'/hospital/register'})
}
</script>

<style scoped lang="scss">
.content {
    display: flex;
    justify-content: space-between;

    .left {
        width: 60%;

        .msg {
            color: #7f7f7f;
            margin-top: 20px;
            display: flex;
            justify-content: space-between;

            .level,
            .time {
                display: flex;
                align-items: center;
                span {
                    margin-left: 5px;
                }
            }
        }
    }

    .right {
        img {
            width: 50px;
            height: 50px;
        }
    }
}
</style>